<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1 input{
				background: #CCCCCC;
			}
			#div1 .active{
				background: #FFFF00;
			}
			#div1 div{
				width: 200px;
				height: 200px;
				background: red;
				text-align: center;
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<input type="button" value="按钮1" class="active"/>
			<input type="button" value="按钮2" />
			<input type="button" value="按钮3" />
			<div style="display: block;">
				吾问无为谓无无无无无无无无
			</div>
			<div>
				额鹅鹅鹅鹅鹅鹅鹅鹅鹅额鹅鹅
			</div>
			<div>
				柔柔弱弱若若若若若若若若人
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var odiv=new TabSwitch("div1");
		}
		function TabSwitch(id){
			var oodiv=document.getElementById(id);
			this.aBtn=oodiv.getElementsByTagName("input");
			this.aDiv=oodiv.getElementsByTagName("div");
			var i=0;
			var _this=this;//this是new出来的对象,即odiv
			for(i=0;i<this.aBtn.length;i++){
				this.aBtn[i].index=i;
				this.aBtn[i].onclick=function(){
					_this.tab(this);//通过参数的形式，将被点击的按钮传到下面去
				};
			}
		};
		TabSwitch.prototype.tab=function(oBtn){
			for(i=0;i<this.aBtn.length;i++){
				this.aBtn[i].className='';
				this.aDiv[i].style.display="none";
			}
			oBtn.className="active";//要被点击的按钮改变，而不是new出来的对象，所以这里不用this
			this.aDiv[oBtn.index].style.display="block";
		}
	</script>

</html>